<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            display: flex;
        }

        ul img {
            width: 300px;
        }

        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            /* opacity: 0; */
            visibility: hidden;
        }

        .cover img {
            width: 400px;
            height: 450px;
            min-width: 100px;
            min-height: 110px;
            max-width: 700px;
            max-height: 800px;
        }
    </style>
</head>

<body>

    <ul>
        <!-- <li>
            <img src="../images/girlsmall1.jpg" alt="">
        </li> -->
    </ul>

    <div class="cover">
        <img src="" alt="">
    </div>

    <script>

        // 1 区分opacity:0和visibility:hidden   
        // 2 事件里面嵌套事件的时候，注意要移除内部嵌套的事件

        var smallArr = ['../images/girlsmall1.jpg', '../images/girlsmall2.jpg', '../images/girlsmall3.jpg', '../images/girlsmall4.jpg'];
        var bigArr = ['../images/girlbig1.jpg', '../images/girlbig2.jpg', '../images/girlbig3.jpg', '../images/girlbig4.jpg'];

        // var imgArr = [
        //     {
        //         smallImg : '1.jpg' ,
        //         bigImg : 'b1.jpg'
        //     },
        //     {
        //         smallImg : '1.jpg' ,
        //         bigImg : 'b1.jpg'
        //     },
        //     {
        //         smallImg : '1.jpg' ,
        //         bigImg : 'b1.jpg'
        //     },
        //     {
        //         smallImg : '1.jpg' ,
        //         bigImg : 'b1.jpg'
        //     },
        // ]

        // 1 渲染页面
        var oUl = document.querySelector('ul');
        var oCover = document.querySelector('.cover');
        var oImg = oCover.querySelector('img');

        render();

        // 2 点击事件
        var oImgs = oUl.querySelectorAll('img');
        for (var i = 0; i < oImgs.length; i++) {
            // console.log(oImgs[i]);
            oImgs[i].addEventListener('click', function () {
                // console.log(1)
                oCover.style.visibility = 'visible';

                // 图片显示
                var i = this.getAttribute('index');
                oImg.src = bigArr[i];

                document.onwheel = function (e) {
                    console.log(2);
                    e = e || event;
                    // 向上负数    向下正数
                    console.log(e.deltaY);
                    if (e.deltaY > 0) {
                        // 向下缩小  --- 在原来的基础上 * 0.8
                        oImg.style.width = parseInt(getComputedStyle(oImg).width) * 0.8 + 'px';
                        oImg.style.height = parseInt(getComputedStyle(oImg).height) * 0.8 + 'px';
                    }
                    else if (e.deltaY < 0) {
                        // 向上放大  --- 在原来的基础上 * 1.2
                        oImg.style.width = parseInt(getComputedStyle(oImg).width) * 1.2 + 'px';
                        oImg.style.height = parseInt(getComputedStyle(oImg).height) * 1.2 + 'px';
                    }
                }

                // 如果这里用的事件监听就一定需要清除
                oCover.onclick = function () {
                    document.onwheel = null;
                    console.log(1)
                    oCover.style.visibility = 'hidden';
                }
            })
        }










        function render() {
            var liHTML = '';
            smallArr.forEach(function (item, i) {
                liHTML += `
                    <li>
                        <img src="${item}" alt="" index=${i}>
                    </li>
                `
            })
            oUl.innerHTML = liHTML;
        }

    </script>


</body>

</html>